<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>附近设备</title>
    <style>
        body{
            margin: 0px;
            width: 375px;
            height: 61px;
        }
        #img1{
            width: 375px;
            height: 61px;
        }
        #return{
            width: 21px;
            height: 40px;
        }
        #img2{
            width: 70px;
            height: 70px;
        }
        .news ul {
            padding: 0;
            line-height:3px
        }
        .news li {
            position: relative;
            overflow: hidden;
            padding: 5px;
            border-bottom: 1px solid lightgray;
        }
        .news li span {
            display: none;
        }
        .news li:hover span {
            display: inline;
            position: absolute;
            top: 0;
            right: 2px;
            padding: 0 5px;
            border-radius: 10px;
            font-size: 12px;
            background: #ececec;
        }
        .news .news_content {
            width: 60%;
            height: 85%;
            margin: 2.5%;
            float: left;
        }
        .news .news_content p {
            line-height: 27px;
            margin-top: 10px;
        }
        .news img {
            float: right;
            width: 25%;
            position: relative;
        }
        #submit{
            width: 75px;
            height: 30px;
            border-radius: 5px;
            background-color: white;
            color: #7e86ec;
            position: absolute;
            top: 41px;
            left: 285px;
        }
    </style>
</head>
<body>
<div style="position:relative;">
    <img id="img1" src="./img/nearby/img1.png">
    <div style="position:absolute; left:10px; top:8px;">
        <img id="return" src="./img/nearby/return.png" onclick="history.go(-1)">
    </div>
    <div style="position:absolute; left:315px; top:-6px;">
        <img id="img2" src="./img/nearby/img2.png">
    </div>
</div>
<div id="content">
    <div class="news">
        <ul id="news">
        </ul>
    </div>
</div>
<script src="./api/app.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
    // function init() {
    //
    //     $('#news_type').delegate('a','click',function (e) {
    //         $('.nav-bar').find('.active').removeClass('active')
    //         $(e.currentTarget).addClass('active')
    //         var type=$(e.currentTarget).data('type')
    //         //console.log(type)
    //         loadData(type)
    //
    //     })
    //
    //     $('#news').delegate('.del-item','click',function (e) {
    //
    //         delItem(e, $(e.target).data('id'))
    //
    //     })
    // }
    //
    // function delItem(e, id) {
    //     //第一种方法
    //     $.get(url+'api/delete.php',{
    //         id:id
    //     },function (res) {
    //         res=JSON.parse(res)
    //         if (res.code==200){
    //
    //         }
    //         console.log(res)
    //
    //     })
    //
    //     e.target.parentElement.parentElement.removeChild(e.target.parentElement)
    //     // console.log(e.target.parentElement)
    // }

    function loadData(type) {
        $.ajax({
            url:url+'api/nearby.php',
            type:'GET',
            data:{
                type:type
            },
            dataType:'json',
            success:function (res) {

                console.log(res)
                if(res.code==200){
                    var data=res.data
                    var ls = document.getElementById('news')
                    var contents = '';
                    for (var j = 0; j < data.length; j ++) {
                        contents +=
                            '           <li >\n' +
                            '                <div class="news_content">\n' +
                            '                    <p>男生宿舍</p>\n' +
                            '                    <h4>' + data[j].name + '</h4>\n' +
                            '                </div>\n' +
                            '                <input id="submit"    name="submit" type="submit" value="选择" >' +
                            '            </li>\n'
                    }
                    ls.innerHTML = contents;

                }
            },
            error:function (res) {

                console.log(res)

            }
        })




    }

    window.onload = function () {
        loadData(-1);
        // init();
    }
</script>
</body>
</html>